<template>
  <div style="width: 100%; height: 100%; min-width: 700px;">
    <div class="resultManage_header">
      <span class="resultManage_header_title">
        &nbsp;
        <i class="el-icon-office-building"/>
        检测结果管理
      </span>
    </div>
    <div class="resultManage_main">
      <div class="resultManage_main_header">
        <el-button type="primary" size="small" style="float: left;" @click="handleAdd">
          <i class="el-icon-plus"/>
          新增检测结果
        </el-button>
        <div class="resultManage_main_header_title">查找到{{tableData.length}}个结果</div>
        <el-link class="resultManage_main_header_refresh" :underline="false" type="primary" @click="handleRefresh">
          <i class="el-icon-refresh" />
          刷新
        </el-link>
        <el-input
          class="resultManage_main_header_search"
          v-model="search"
          :placeholder="searchInfo"
          @keyup.enter.native="getList"
        >
          <el-link style="padding-right: 5px;" slot="suffix" :underline="false" @click="getList">
            <i class="el-icon-search"/>
            搜索
          </el-link>
        </el-input>
        <el-dropdown
          class="resultManage_main_header_searchWay"
          @command="handleCommand"
          trigger="click"
        >
          <span style="color: #409EFF;">
            {{ searchWay }}<i class="el-icon-arrow-down el-icon--right"/>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="phoneNumber">按手机号搜索</el-dropdown-item>
            <el-dropdown-item command="ai_id">按预约编号搜索</el-dropdown-item>
            <el-dropdown-item command="result">按检测结果搜索</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="resultManage_main_main">
        <el-table
          v-loading="loading"
          :header-cell-style="{background:'#ECF1FE'}"
          :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          min-height="500px"
          :default-sort = "{prop: 'time', order: 'descending'}"
          highlight-current-row
          border
          stripe
        >
          <el-table-column
            prop="ai_id"
            label="预约编号"
            width="180"
          />
          <el-table-column
            prop="phoneNumber"
            label="用户手机号"
            min-width="360"
          />
          <el-table-column
            prop="time"
            label="检测时间"
            width="360"
          />
          <el-table-column
            prop="result"
            label="检测结果"
            width="180"
          />
          <el-table-column
            label="操作"
            width="180"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                style="margin-right: 20px;"
                :underline="false"
                @click="handleEdit(scope.$index, scope.row)"
              >
                编辑
              </el-link>
              <el-link
                type="danger"
                :underline="false"
                @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-top: 10px"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="tableData.length"
          layout="prev, pager, next, jumper"
        />
      </div>
      <!-- 新增检测结果 -->
      <el-dialog
        title="新增检测结果"
        width="600px"
        :visible.sync="addDialogFormVisible"
        :append-to-body="true"
      >
        <el-form label-width="120px" ref="showAddRow" :rules="rules" :model="showAddRow">
          <el-form-item label="预约编号" prop="ai_id">
            <el-input
              style="width: 240px;"
              v-model="showAddRow.ai_id"
            />
          </el-form-item>
          <el-form-item label="检测结果" prop="result">
            <el-select
              style="width: 240px;"
              v-model="showAddRow.result"
              placeholder="请选择检测结果"
            >
              <el-option label="阴性" value="阴性"/>
              <el-option label="阳性" value="阳性"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改检测结果 -->
      <el-dialog
        title="修改检测结果"
        width="600px"
        :visible.sync="updateDialogFormVisible"
        :append-to-body="true"
      >
        <el-form label-width="120px">
          <el-form-item label="预约编号">
            <el-input
              style="width: 240px;"
              v-model="showUpdateRow.ai_id"
              disabled
            />
          </el-form-item>
          <el-form-item label="检测时间">
            <el-input
              style="width: 240px;"
              v-model="showUpdateRow.time"
              disabled
            />
          </el-form-item>
          <el-form-item label="检测结果">
            <el-select
              style="width: 240px;"
              v-model="showUpdateRow.result"
              placeholder="请选择检测结果"
            >
              <el-option label="阴性" value="阴性"/>
              <el-option label="阳性" value="阳性"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="handleUpdateSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  TOadminResultAdd,
  TOadminResultDelete,
  TOadminResultUpdate,
  TOadminResultCheck
} from '@/api/result-service'
export default {
  data() {
    return {
      originData: [],
      tableData: [],
      nowRow: {},
      showUpdateRow: {
        tr_id: 0,
        ai_id: 0,
        time: "",
        result: ""
      },
      showAddRow: {
        ai_id: null,
        result: ""
      },
      rules: {
        ai_id: [{ required: true, message: "请输入预约编号", trigger: 'blur' }],
        result: [{ required: true, message: "请选择检测结果" }]
      },
      search: "",
      searchData: "",
      searchInfo: "输入手机号进行搜索",
      searchWay: "按手机号搜索",
      currentPage: 1, // 当前页数
      pageSize: 10, // 设置分页数
      addDialogFormVisible: false,
      updateDialogFormVisible: false,
      loading: false
    }
  },
  created() {
    this.handleRefresh();
  },
  methods: {
    handleRefresh() {
      this.loading = true;
      this.search = '';
      this.pageList();
    },
    pageList() {
      TOadminResultCheck().then((data) => {
        this.originData = data.sort((a, b) => {
          if (a.time < b.time) return 1;
          else return -1;
        });
        this.getList();
        this.loading = false;
      });
    },
    getList() {
      this.searchData = this.search;
      if (this.searchWay === "按手机号搜索") {
        this.tableData = this.originData.filter((item) => {
          return item.phoneNumber.includes(this.searchData);
        });
      } else if (this.searchWay === "按预约编号搜索") {
        this.tableData = this.originData.filter((item) => {
          return item.ai_id.toString().includes(this.searchData);
        });
      } else if (this.searchWay === "按检测结果搜索") {
        this.tableData = this.originData.filter((item) => {
          return item.result.includes(this.searchData);
        });
      }
    },
    handlePageChange(val) {
      this.currentPage = val;
    },
    handleCommand(command) {
      if (command === "phoneNumber") {
        this.searchInfo = "输入手机号进行搜索";
        this.searchWay = "按手机号搜索";
        this.search = "";
        this.getList();
      } else if (command === "ai_id") {
        this.searchInfo = "输入预约编号进行搜索";
        this.searchWay = "按预约编号搜索";
        this.search = "";
        this.getList();
      } else if (command === "result") {
        this.searchInfo = "输入检测结果进行搜索";
        this.searchWay = "按检测结果搜索";
        this.search = "";
        this.getList();
      }
    },
    handleAdd() {
      this.showAddRow.ai_id = "";
      this.showAddRow.result = "";
      this.addDialogFormVisible = true;
    },
    handleEdit(index, row) {
      this.nowRow = row;
      this.showUpdateRow.tr_id = row.tr_id;
      this.showUpdateRow.ai_id = row.ai_id;
      this.showUpdateRow.time = row.time;
      this.showUpdateRow.result = row.result;
      this.updateDialogFormVisible = true;
    },
    handleAddSubmit() {
      this.$refs.showAddRow.validate(valid => {
        if (valid) {
          this.showAddRow.ai_id = parseInt(this.showAddRow.ai_id);
          TOadminResultAdd(this.showAddRow).then(() => {
            this.$message.success('新增成功');
            this.handleRefresh();
          }).finally(() => {
            this.addDialogFormVisible = false;
          });
        } else {
          console.error('error submit!!!');
        }
      });
    },
    handleUpdateSubmit() {
      TOadminResultUpdate(this.showUpdateRow).then(() => {
        this.nowRow.result = this.showUpdateRow.result;
        this.$message.success('修改成功');
      }).finally(() => {
        this.updateDialogFormVisible = false;
      });
    },
    handleDelete(index, row) {
      this.$confirm('此操作永久删除该条结果, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        TOadminResultDelete(row).then(() => {
          this.tableData.splice(index, 1);
          this.$message.success('删除成功');
        });
      });
    }
  }
}
</script>

<style lang="scss">
.resultManage_header {
  background: #FFFFFF;
  border-bottom: 1px solid #DCDFE6;
  width: calc(100% - 60px);
  height: 50px;
  margin: 0px 30px;

  .resultManage_header_title {
    font-weight: bold;
    font-size: 22px;
    line-height: 50px;
    margin-left: 5px;
    border-left: 5px solid #21a6e6;
  }
}

.resultManage_main {
  margin: 30px 30px 0px 30px;
  width: calc(100% - 60px);

  .resultManage_main_header {
    height: 40px;
    line-height: 40px;
    margin-bottom: 30px;

    .resultManage_main_header_title {
      color: #919191;
      float: left;
      font-size: 14px;
      margin-left: 20px;
    }

    .resultManage_main_header_refresh {
      float: right;
      margin-left: 20px;
    }

    .resultManage_main_header_search {
      float: right;
      margin-left: 20px;
      width: 260px;
    }

    .resultManage_main_header_searchWay {
      float: right;
      cursor: default;
    }
  }
}

</style>

<style lang="scss" scoped>
::v-deep .el-button--primary {
  color: #fff;
  background-color: #4875f6;
  border-color: #4875f6;
  -webkit-box-shadow: 0 5px 5px rgba(72,117,246,.15);
  box-shadow: 0 5px 5px rgba(72,117,246,.15);
}

::v-deep .el-button--primary:hover {
  background: #6d91f8;
  border-color: #6d91f8;
  color: #fff;
}

</style>